<template>
	<view>

		<view class="">
			<HMFilterDropdown @searchFatFn="searchFatFn" :filterData="filterData" :defaultSelected="defaultSelected"
				@confirm="confirm">
			</HMFilterDropdown>
		</view>
		<view class="" style="padding: 25rpx;" v-if="lists.length">
			<block v-for="(item,i) in lists">
				<shopItem type="chuzu" :activeType="activeType" :item="item"></shopItem>
			</block>
		</view>
		<block v-else>
			<noneList></noneList>
		</block>
		
		<uv-load-more :status="loadStatus" />
	</view>
</template>

<script>
	import shopItem from "@/components/shopItem/shopItem.vue"
	import HMFilterDropdown from "@/uni_modules/HM-filterDropdown/components/HM-filterDropdown/HM-filterDropdown"
	export default {
		components: {
			HMFilterDropdown,
			shopItem
		},
		data() {
			return {
				search: '',
				lists: [],
				district:'',
				city: '',
				area: 'all',
				type:'all',
				status:'all',
				monthrent:'all',
				filterData: [{
						"name": '区域',
						"type": 'hierarchy-column',
						"submenu": [{
								"name": "不限",
								"value": "all"
							},]
					},
					{
						"name": '状态',
						"type": 'hierarchy',
						"submenu": [{
								"name": '不限',
								"value": "all",
							},
							{
								"name": '出租',
								"value": "1",
							},
							{
								"name": '出售',
								"value": "0",
							}
						]
					},
					{
						"name": '月租',
						"type": 'filter',
						"submenu": [{
							"submenu": [{
									"name": "不限",
									"value": "all"
								},
								{
									"name": "2千以内",
									"value": "1"
								},
								{
									"name": "2千-5千",
									"value": "2"
								},
								{
									"name": "5千-1万",
									"value": "3"
								},
								{
									"name": "1万-1.5万",
									"value": "4"
								},
								{
									"name": "1.5万-2万",
									"value": "5"
								},
								{
									"name": "2万以上",
									"value": "6"
								}
							]
						}, ]
					},
					{
						"name": '面积',
						"type": 'filter',
						"submenu": [{
							"submenu": [{
									"name": "不限",
									"value": "all"
								},
								{
									"name": "20以内",
									"value": "1"
								},
								{
									"name": "20-50",
									"value": "2"
								},
								{
									"name": "50-100",
									"value": "3"
								},
								{
									"name": "100-150",
									"value": "4"
								},
								{
									"name": "200-500",
									"value": "5"
								},
								{
									"name": "500以上",
									"value": "6"
								}
							]
						}, ]
					},
					{
						"name": '类型',
						"type": 'filter',
						"submenu": [{
							"submenu": []
						}, ]
					},
				],
				defaultSelected: [
					[3, 0, 1], //第0个菜单选中 一级菜单的第6项，二级菜单的第0项，三级菜单的第1项
					[2, 0, 1], //第1个菜单选中 一级菜单的第2项，二级菜单的第0项，三级菜单的第1项
					[1], //第2个菜单选中 一级菜单的第1项 一级菜单的第1项
					[
						[0],
						[1, 2, 7],
						[1, 0]
					], //筛选菜单选中 第一个筛选的第0项，第二个筛选的第1,2,7项，第三个筛选的第1,0项
					[
						[0],
						[1],
						[1]
					] //单选菜
				],
				activeType:'',
				loadShow: true,
				loadStatus: 'loadmore',
				pageNum:1
			};
		},
		onReachBottom() {
			// 触底加载
			this.getLists()
		},
		onShow() {
			this.lists = []
			this.loadShow = true,
			this.loadStatus = 'loadmore',
			this.pageNum = 1 
			uni.getStorage({
				key: 'city',
				success: res => {
					this.filterData[0].name = res.data
					this.city = res.data
					this.getLists()
				},
				fail: err => {
					this.city = ''
					this.getLists()
				}
			})
		},
		onLoad(res) {
			if(res.type) {
				this.activeType = res.type
			}
			this.getHomeDetali()
			this.configFn()
		},

		methods: {
			// 地区确定
			confirm(e) {
				this.lists = []
				this.loadShow = true,
				this.loadStatus = 'loadmore',
				this.pageNum = 1
				if(e.value[0].length&&e.index[0][0]!=null) {
					// 地区
					this.city = e.value[0][0]
					this.district = e.value[0][1]
				}
				if(e.value[1].length&&e.index[1][0]!=null) {
					// 状态
					this.status = e.value[1][0]
				}
				if(e.value[2].length&&e.index[2][0].length) {
					// 月租
					this.filterData[2].name = this.filterData[2].submenu[0].submenu[e.index[2][0]].name
					this.monthrent = e.value[2][0][0]
				}
				if(e.value[3].length&&e.index[3][0].length) {
					// 面积
					this.filterData[3].name = this.filterData[3].submenu[0].submenu[e.index[3][0]].name
					this.area = e.value[3][0][0]
				}
				if(e.value[4].length&&e.index[4][0].length) {
					// 类型
					this.filterData[4].name = e.value[4][0]
					this.type = Number(e.index[4][0])+1
				}else {
					this.filterData[4].name = '类型'
					this.type = 'all'
				}
				
				this.getLists()
			},
			// 搜索
			searchFatFn(e) {
				this.search = e
				this.getLists()
			},
			// 列表
			getLists() {
				if (this.loadShow) {
					this.loadStatus = 'loading'
					this.loadShow = false
					this.$api.sendRequest({
						url: '/api/shop/myshop',
						data: {
							page: this.pageNum,
							num: 10,
							search: this.search,
							district: this.district,
							city: this.city,
							businessarea_id: '',
							status: this.status,
							monthrent: this.monthrent,
							area: this.area,
							type: this.type,
							transfer_fee: 'all',
						},
						success: res => {
							this.lists.push(...res.data.data)
							if (res.data.data.length < 10) {
								this.loadShow = false
								this.loadStatus = 'nomore'
								return
							}
							this.pageNum++
							this.loadShow = true
							this.$forceUpdate()
						}
					})
				}
				
				// this.$api.sendRequest({
				// 	url: '/api/shop/myshop',
				// 	data: {
				// 		page: 1,
				// 		num: 10,
				// 		search: this.search,
				// 		district: this.district,
				// 		city: this.city,
				// 		businessarea_id: '',
				// 		status: this.status,
				// 		monthrent: this.monthrent,
				// 		area: this.area,
				// 		type: this.type,
				// 		transfer_fee: 'all',
				// 	},
				// 	success: res => {
				// 		this.lists = res.data.data
				// 	}
				// })
			},

			// 根据开通区域的id查下面的区
			getArea(id, i) {
				this.$api.sendRequest({
					url: '/api/index/area',
					data: {
						area_id: id
					},
					success: res => {
						let arrs = this.filterData[0].submenu[i].submenu
						arrs.push({
							name: '不限',
							value: 'all',
						})
						res.data.forEach((item, i) => {
							arrs.push({
								name: item.name,
								value: item.name,
							})
						})
						this.filterData[0].submenu[i].submenu = arrs
					}
				})

			},
			// 配置信息
			getHomeDetali() {
				this.$api.sendRequest({
					url: '/api/index/index',
					success: res => {
						// 获取市+区
						res.data.operatearea.forEach((item, i) => {
							this.filterData[0].submenu.push({
								name: item.city,
								value: item.city,
								submenu: []
							})
							this.getArea(item.id, i+1)
						})
					}
				})
			},
			// 配置信息 --- 状态
			configFn() {
				this.$api.sendRequest({
					url: '/api/index/config',
					success: res => {
						console.log(res.data.type_list);
						let arrs = Object.values(res.data.type_list)
						arrs.forEach((item, i) => {
							this.filterData[4].submenu[0].submenu.push({
								name: item,	
								value: item,
							})
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.icon-xiajiantou {
		font-size: 22rpx;
		color: #9299a3;
		margin-left: 8rpx;

	}
</style>
